<template>
  <div class="container layer">
    <div class="justify-center container-xxl container-row">
      <div class="justify-center wrapper">
        <ul class="">
          <li v-for="(value, key, index) in category" :key="index">
            <div v-if="index === 0" @click="toALLC">
              <a class="small">
                <span style="color: #26A69A">ALL Category</span>
              </a>
            </div>
            <div v-for="(item, i) in value" :key="i">
              <a class="small" @click="routerTo(item.id)">
                <span>{{ item.name }}</span>
              </a>
            </div>
          </li>
        </ul>
        <aplusmax-button-img src="https://cdn.quasar.dev/img/parallax2.jpg"></aplusmax-button-img>
    </div>
  </div>
</div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose} from 'vue'
import { storeToRefs } from 'pinia';
import { appStore } from '@/store/app.ts';
import { ref } from "vue"
import {useRouter} from "vue-router";

const emit = defineEmits(["subHide"])

const appstore = appStore();
const { category } = storeToRefs(appstore);
console.log(category)
const props = defineProps({
  top: {
    required: true,
    type: Number
  }
});

const router = useRouter()
const routerTo = (pathName) => {
  console.log(pathName, "+++==")
  emit("subHide")
  router.push(`/pc/category/${pathName}`)
}
const toALLC = () => {
  emit("subHide")
  router.push('/pc/category')
}


defineExpose({})
</script>

<style scoped lang='less'>
.container-row{

}
.wrapper{
  display: grid;
  grid-template-columns: 2fr 1fr;
  //padding: 0 50px;
}
.layer {
  border-top: 1px solid #d9d9d9;
  width: 100%;
  background-color: #fff;
  position: absolute;
  left: 0px;
  box-shadow: 0 0 5px #ccc;
  //transition: all 0.2s 0.1s;
  z-index: 100;
  ul {
    display: grid;
    grid-template-rows: 1fr 1fr; /* 创建两行，高度相等 */
    grid-template-columns: auto auto auto; /* 创建三列，宽度相等 */
    gap: 35px; /* 设置行列间隙 */
    //margin-inline-start: -0.9375rem;
    //display: flex;
    //justify-content: space-between;
    //flex-wrap: wrap;
    padding: 30px 0px 30px 50px;
    //align-items: center;
    li {
      //border: 1px solid #ccc;
      padding: 10px 10px 10px 0;
      //text-align: center;
      //flex: 1;
      //box-sizing: border-box;
      .all{
        font-size: 18px;
        font-weight: 800;
        padding: 0.625rem;
        margin: -0.625rem 0 0 -0.625rem;
      }
      .all-a {
        position: relative;
        cursor: pointer;
      }
      .all-a{
        &::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: -2px;
          width: 0;
          height: 1px;
          background-color: #000000; /* 边框颜色 */
          transition: width 0.5s ease; /* 过渡效果 */
        }
        &:hover::after {
          width: 100%; /* 鼠标悬浮时边框宽度为100% */
        }
      }
      span{
        padding: 6px 0px;
      }
      div{
        padding: 5px 0px;
      }
      .small {
        position: relative;
        cursor: pointer;
      }
      .small{
        font-size: small;
        &::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: -2px;
          width: 0;
          height: 1px;
          background-color: #000000; /* 边框颜色 */
          transition: width 0.5s ease; /* 过渡效果 */
        }
        &:hover::after {
          width: 100%; /* 鼠标悬浮时边框宽度为100% */
        }
      }
      &:first-child{
        grid-row: span 2; /* 让元素跨越两行 */
      }
    }
  }
}
.img{
  padding: 25px 0;
}
.row-padding{
  padding: 50px 50px;
}
</style>